<template>
  <form class="form2" autocomplete="off">
    <div class="name">
      <input type="text" placeholder="姓名" v-model="name" @input="resetNameError" :class="{'inputError': nameErrorMessage}" maxlength="16">
      <div class="nameError">{{ nameErrorMessage }}</div>
    </div>
    <div class="password" >
      <input type="password" placeholder="密码" autocomplete="off" v-model="password"  :class="{'inputError': errorMessage}" @input="resetError" maxLength="16">
      <div class="errorMessage">{{ errorMessage }}</div>
    </div>
    <div class="tips">*密码由8-16位数字、大写字母、小写字母组成</div>
  </form>
</template>

<script>
export default {
  computed: {
    // 姓名
    name: {
      get () {
        return this.$store.state.register.name
      },
      set (val) {
        this.$store.commit('register/set_name', val)
      }
    },
    // 密码
    password: {
      get () {
        return this.$store.state.register.password
      },
      set (val) {
        this.$store.commit('register/set_password', val)
      }
    },
    // 姓名下方错误信息
    nameErrorMessage () {
      return this.$store.state.register.nameErrorMessage
    },
    // 错误信息
    errorMessage () {
      return this.$store.state.register.errorMessage
    }
  },
  methods: {
    // 重置姓名错误
    resetNameError () {
      if (this.nameErrorMessage) {
        this.$store.commit('register/set_nameErrorMessage', '')
      }
    },
    // 重置错误
    resetError () {
      if (this.errorMessage) {
        this.$store.commit('register/set_errorMessage', '')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .form2{
    padding: 0 70px;
    input{
      width: 400px;
      height: 48px;
      border: 1px solid #d8dee9;
      border-radius: 2px;
      outline: none;
      padding-left: 16px;
      font-size: 16px;
      color: #0D172C;
      &::-webkit-input-placeholder{
        font-size: 16px;
        color: #9eaac4;
      }
    }
    .inputError {
      border-color: #FF2929;
    }
    .name{
      position: relative;
      margin-bottom: 32px;
      .nameError {
        position: absolute;
        font-size: 12px;
        color: #FF2929;
        top: 53px;
      }
    }
    .password{
      margin-bottom: 32px;
      position: relative;
      .errorMessage {
        position: absolute;
        font-size: 12px;
        color: #FF2929;
        top: 53px;
      }
    }
    .tips{
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      color: #5f7196;
      line-height: 20px;
      margin-bottom: 16px;
    }
  }
</style>
